<!--
 * @Author: Craft
 * @Date: 2024-08-18
 * @Description: 暗黑破坏神2重置版装备详情页
-->
<template>
  <view class="d2r-container">
    <view v-if="loading" class="d2r-loading">
      <u-loading-icon mode="circle" color="#d4af37"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
    
    <view v-else-if="!item" class="d2r-empty">
      <u-icon name="info-circle" size="48" color="#a0a0a0"></u-icon>
      <text class="empty-text">未找到装备信息</text>
    </view>
    
    <view v-else class="item-detail">
      <!-- 装备头部 -->
      <view class="item-header">
        <view class="item-image-container" :class="'quality-border ' + getQualityClass(item.quality)">
          <image class="item-image" :src="item.image || '/static/items/default.png'" mode="aspectFit"></image>
        </view>
        <view class="item-title">
          <text class="item-name" :class="getQualityTextClass(item.quality)">{{ item.name }}</text>
          <text class="item-type">{{ item.type }}{{ item.subType ? ' - ' + item.subType : '' }}</text>
        </view>
      </view>
      
      <!-- 装备基本信息 -->
      <view class="item-info-card">
        <view class="info-row">
          <text class="info-label">品质:</text>
          <text class="info-value" :class="getQualityTextClass(item.quality)">{{ item.quality }}</text>
        </view>
        
        <view class="info-row" v-if="item.levelRequire">
          <text class="info-label">需求等级:</text>
          <text class="info-value">{{ item.levelRequire }}</text>
        </view>
        
        <view class="info-row" v-if="item.set">
          <text class="info-label">套装:</text>
          <text class="info-value text-set">{{ item.set }}</text>
        </view>
        
        <view class="info-row" v-if="item.runes && item.runes.length">
          <text class="info-label">符文组合:</text>
          <text class="info-value text-runeword">{{ item.runes.join(' + ') }}</text>
        </view>
        
        <view class="info-row" v-if="item.baseItem">
          <text class="info-label">基础物品:</text>
          <text class="info-value">{{ item.baseItem }}</text>
        </view>
      </view>
      
      <!-- 装备属性 -->
      <view class="item-attributes-card">
        <text class="card-title">装备属性</text>
        <view class="attributes-list">
          <text 
            class="attribute-item" 
            v-for="(attr, index) in item.attributes" 
            :key="index"
          >{{ attr }}</text>
        </view>
      </view>
      
      <!-- 相关BD -->
      <view class="related-builds-card" v-if="relatedBuilds.length > 0">
        <text class="card-title">相关BD</text>
        <view class="builds-list">
          <view 
            class="build-item" 
            v-for="build in relatedBuilds" 
            :key="build._id"
            @click="navigateToBuildDetail(build._id)"
          >
            <view class="build-header">
              <text class="build-title">{{ build.title }}</text>
              <view class="class-tag" :class="getClassTagClass(build.class)">{{ build.class }}</view>
            </view>
            <view class="build-info">
              <text class="build-author">{{ build.author }}</text>
              <view class="build-stats">
                <view class="stat-item">
                  <u-icon name="eye" size="12" color="#a0a0a0"></u-icon>
                  <text class="stat-text">{{ build.viewCount }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="action-button" @click="toggleFavorite">
          <u-icon :name="isFavorite ? 'star-fill' : 'star'" size="20" :color="isFavorite ? '#d4af37' : '#a0a0a0'"></u-icon>
          <text>{{ isFavorite ? '已收藏' : '收藏' }}</text>
        </view>
        <view class="action-button" @click="shareItem">
          <u-icon name="share" size="20" color="#a0a0a0"></u-icon>
          <text>分享</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { loadData, updateFavorite } from '@/common/d2r-data'

// 数据
const item = ref(null)
const relatedBuilds = ref([])
const loading = ref(true)
const isFavorite = ref(false)

// 获取页面参数
const itemId = ref('')

// 生命周期
onMounted(async () => {
  // 获取路由参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.$page?.options || {}
  
  if (options.id) {
    itemId.value = options.id
    await Promise.all([
      loadItemData(),
      loadRelatedBuilds()
    ])
  } else {
    loading.value = false
    uni.showToast({
      title: '缺少装备ID参数',
      icon: 'none'
    })
  }
  
  // 检查是否已收藏
  checkFavoriteStatus()
})

// 加载装备数据
async function loadItemData() {
  try {
    loading.value = true
    
    // 查询单个装备
    const items = await loadData('items')
    item.value = items.find(i => i._id === itemId.value)
    
    if (!item.value) {
      uni.showToast({
        title: '未找到装备信息',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载装备数据失败', error)
    uni.showToast({
      title: '加载装备数据失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 加载相关BD
async function loadRelatedBuilds() {
  try {
    const builds = await loadData('builds')
    relatedBuilds.value = builds.filter(build => 
      build.items && build.items.includes(itemId.value)
    ).slice(0, 3) // 最多显示3个相关BD
  } catch (error) {
    console.error('加载相关BD失败', error)
  }
}

// 检查收藏状态
function checkFavoriteStatus() {
  try {
    const favoriteItems = uni.getStorageSync('favorite_items') || []
    isFavorite.value = favoriteItems.includes(itemId.value)
  } catch (e) {
    console.error('获取收藏状态失败', e)
  }
}

// 切换收藏状态
async function toggleFavorite() {
  try {
    const favoriteItems = uni.getStorageSync('favorite_items') || []
    
    if (isFavorite.value) {
      // 取消收藏
      const index = favoriteItems.indexOf(itemId.value)
      if (index !== -1) {
        favoriteItems.splice(index, 1)
      }
      await updateFavorite('items', itemId.value, false)
      uni.showToast({
        title: '已取消收藏',
        icon: 'none'
      })
    } else {
      // 添加收藏
      favoriteItems.push(itemId.value)
      await updateFavorite('items', itemId.value, true)
      uni.showToast({
        title: '收藏成功',
        icon: 'none'
      })
    }
    
    // 更新本地存储
    uni.setStorageSync('favorite_items', favoriteItems)
    
    // 更新状态
    isFavorite.value = !isFavorite.value
  } catch (e) {
    console.error('更新收藏状态失败', e)
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none'
    })
  }
}

// 分享装备
function shareItem() {
  if (!item.value) return
  
  uni.showModal({
    title: '分享提示',
    content: '该功能将在后续版本中开放，敬请期待！',
    showCancel: false,
    confirmText: '我知道了'
  })
}

// 跳转到BD详情
function navigateToBuildDetail(buildId) {
  uni.navigateTo({
    url: `/pages-sub/builds/build-detail?id=${buildId}`
  })
}

// 获取品质样式类
function getQualityClass(quality) {
  switch (quality?.toLowerCase()) {
    case '普通': return 'normal'
    case '魔法': return 'magic'
    case '稀有': return 'rare'
    case '套装': return 'set'
    case '暗金': return 'unique'
    case '工艺': return 'crafted'
    default: return ''
  }
}

// 获取品质文本样式类
function getQualityTextClass(quality) {
  switch (quality?.toLowerCase()) {
    case '普通': return 'text-normal'
    case '魔法': return 'text-magic'
    case '稀有': return 'text-rare'
    case '套装': return 'text-set'
    case '暗金': return 'text-unique'
    case '工艺': return 'text-crafted'
    default: return ''
  }
}

// 获取职业标签样式类
function getClassTagClass(className) {
  switch (className) {
    case '亚马逊': return 'amazon'
    case '野蛮人': return 'barbarian'
    case '死灵法师': return 'necromancer'
    case '圣骑士': return 'paladin'
    case '法师': return 'sorceress'
    case '德鲁伊': return 'druid'
    case '刺客': return 'assassin'
    default: return ''
  }
}
</script>

<style lang="scss" scoped>
@import '@/common/d2r-theme.scss';
.d2r-container {
  min-height: 100vh;
  padding-bottom: 30px;
}

// 装备详情
.item-detail {
  padding: 15px;
  
  // 装备头部
  .item-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    
    .item-image-container {
      width: 80px;
      height: 80px;
      padding: 5px;
      background-color: $d2r-bg-darker;
      border-radius: 6px;
      margin-right: 15px;
      
      .item-image {
        width: 100%;
        height: 100%;
      }
    }
    
    .item-title {
      flex: 1;
      
      .item-name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
      }
      
      .item-type {
        font-size: 14px;
        color: $d2r-text-muted;
      }
    }
  }
  
  // 信息卡片
  .item-info-card {
    background-color: $d2r-bg-darker;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    
    .info-row {
      display: flex;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-label {
        width: 80px;
        font-size: 14px;
        color: $d2r-text-muted;
      }
      
      .info-value {
        flex: 1;
        font-size: 14px;
        color: $d2r-text;
      }
    }
  }
  
  // 属性卡片
  .item-attributes-card {
    background-color: $d2r-bg-darker;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    
    .card-title {
      font-size: 16px;
      color: $d2r-gold;
      margin-bottom: 10px;
      display: block;
    }
    
    .attributes-list {
      .attribute-item {
        font-size: 14px;
        color: $d2r-text;
        margin-bottom: 5px;
        display: block;
        line-height: 1.4;
      }
    }
  }
  
  // 相关BD卡片
  .related-builds-card {
    background-color: $d2r-bg-darker;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    
    .card-title {
      font-size: 16px;
      color: $d2r-gold;
      margin-bottom: 10px;
      display: block;
    }
    
    .builds-list {
      .build-item {
        padding: 10px 0;
        border-bottom: 1px solid $d2r-border;
        
        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
        
        .build-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
          
          .build-title {
            font-size: 14px;
            color: $d2r-text;
            font-weight: bold;
          }
        }
        
        .build-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .build-author {
            font-size: 12px;
            color: $d2r-text-muted;
          }
          
          .build-stats {
            display: flex;
            
            .stat-item {
              display: flex;
              align-items: center;
              
              .stat-text {
                font-size: 12px;
                color: $d2r-text-muted;
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
  }
  
  // 操作按钮
  .action-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    
    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      text {
        font-size: 14px;
        color: $d2r-text-muted;
        margin-top: 5px;
      }
    }
  }
}

// 品质文本颜色
.text-normal {
  color: $quality-normal;
}

.text-magic {
  color: $quality-magic;
}

.text-rare {
  color: $quality-rare;
}

.text-set {
  color: $quality-set;
}

.text-unique {
  color: $quality-unique;
}

.text-crafted {
  color: $quality-crafted;
}

.text-runeword {
  color: $quality-runeword;
}
</style>